<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useNotification, NCard, NSpace, NButton, NTabs, NTabPane, NText } from 'naive-ui'
import http from '@/tools/http'
import { useUserStore } from '@/stores/userStore'

const userStore = useUserStore()
const notification = useNotification()

type PreviewCode = {
    code?: string
    filename: string
    location?: string
}

const router = useRouter()
const route = useRoute()

const formData = reactive<any>({
    basePackage: "",
    removeTableNamePrefix: "",
    urlPrefix: "",
    datasourceName: "",
    tableName: "",
    author: "",
})

const previewData = reactive<PreviewCode[]>([])

const currentName = ref<string>("")

onMounted(() => {
    formData.basePackage = route.query.basePackage
    formData.removeTableNamePrefix = route.query.removeTableNamePrefix
    formData.urlPrefix = route.query.urlPrefix
    formData.datasourceName = route.query.datasourceName
    formData.tableName = route.query.tableName
    formData.author = route.query.author
    codePreview()
})

function codePreview() {
    http.post("/database/table/generate/preview", formData).then(({ data }) => {
        previewData.length = 0
        for (let i = 0; i < data.data.length; i++) {
            previewData.push(data.data[i])
        }
        currentName.value = data.data[0].filename
    })
}

function download() {
    http.post("/database/table/generate", formData, {
        responseType: 'blob'
    }).then(({ headers, data }) => {
        let filename = "file"
        if (headers['content-disposition']) {
            filename = headers['content-disposition'].replace(/attachment; filename=(.*)/, '$1')
        }
        const blob = new Blob([data], { type: headers['content-type'] })
        let dom = document.createElement('a')
        let url = window.URL.createObjectURL(blob)
        dom.href = url
        dom.download = decodeURI(filename)
        dom.style.display = 'none'
        document.body.appendChild(dom)
        dom.click()
        if (dom.parentNode) {
            dom.parentNode.removeChild(dom)
        }
        window.URL.revokeObjectURL(url)
        notification['success']({
            content: '下载成功',
            meta: `文件下载成功`,
            duration: 2500,
            keepAliveOnHover: true
        })
    })
}

</script>

<template>
    <div class="flame-container">
        <n-card :content-style="{ overflowY: 'auto', display: 'flex' }" :bordered="false">
            <template #header>
                <n-space justify="space-between">
                    <div>
                        {{ formData.tableName }} 表代码预览：
                    </div>
                    <div>
                        <n-button v-if="userStore.hasAuth('code-generator-code-preview:download')" quaternary
                            @click="download()">下载</n-button>
                        <n-button quaternary @click="router.back()">返回</n-button>
                    </div>
                </n-space>
            </template>
            <n-tabs style="display:flex;flex-direction: column;" :pane-style="{ display: 'flex', flex: '1' }"
                v-model:value="currentName" type="card">
                <n-tab-pane v-for="(data, index) in previewData" :key="index" :tab="data.filename"
                    :name="data.filename">
                    <n-text style="white-space: pre;">{{ data.code }}</n-text>
                </n-tab-pane>
            </n-tabs>
        </n-card>
    </div>
</template>

<style scoped>
</style>